<template>
	<view class="search_page">
		<view class="header_search"
			:style="{'marginTop' :  backShow ? '8%' : '0', 'padding' : backShow ? '0 30rpx' : '0'}">
			<u-icon v-show="backShow" name="arrow-left" label="返回" size="20" @click="arrowLeft"
				style="margin-right: 30rpx;"></u-icon>
			<u-search :focus="backShow ? true : false" :animation="true" :actionStyle="actionStyle"
				placeholder="输入房源信息查询" :showAction="backShow ? true : false" v-model.trim="searchValue" clearable
				@change="serchChange" class="serch" @clear="clearSearch" borderColor="#d6d6d6" @focus="inputFocus"
				:shape="backShow ? 'round' : 'square'" @blur="isFouse = false"></u-search>
			<!-- -->
			<scroll-view class="search_view" scroll-y  v-show="searchIsShow"
				:style="{'width': backShow ? '100%' : '100%', 'height': backShow ? '100vh' : '33vh', 'top' : backShow ? '150rpx' : '38px',}">
				<view class="" v-show="searchList.length == 0 && isFouse == true">
					<u-empty mode="search" icon="../../../static/default/default.png">
					</u-empty>
				</view>
				<u-cell-group :border="false" v-show="searchList.length > 0">
					<u-cell v-for="(item, index) in searchList" :key="item.id" :icon="backShow ? 'search' : ''"
						:isLink="backShow ? true : false" @click="gotoaddhouse(item)" :border="backShow ? true : false">
						<template slot="title">
							<view ref="searchresultVal" v-html="computedtext(item.name)"></view>
						</template>
					</u-cell>
				</u-cell-group>
			</scroll-view>
		</view>
		<view class="record" v-show="backShow">
			<view class="title">
				搜索历史
			</view>
			<view class="record_list">
				<u-cell-group :border="false">
					<u-cell v-for="(item, index) in historySearch" :key="item.id" icon="clock" :title="item.name"
						:isLink="true" @click="gotoaddhouse(item)">
					</u-cell>
				</u-cell-group>
			</view>
		</view>
		<!-- 搜索建议 -->

		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		homeListPage,
		getCommunity, // 关键字小区搜索
		addHouseInfo, // 房东新增房源信息
		getLandlordName //搜索房东关键字
	} from "@/api/home/index.js"

	import debounce from "@/utils/debounce.js"
	export default {
		data() {
			return {
				searchIsShow: false,
				historySearch: [],

				searchList: [],
				testSearchList: [],
				isFouse: true,
				actionStyle: {
					color: "#f56e3e"
				}
			}
		},
		props: {
			backShow: {
				type: Boolean,
				default: true,
			},
			searchValue: {
				type: String,
				default: ''

			}
		},
		created() {
			var list = uni.getStorageSync('historySearch')
			// console.log(list, 'list');
			if (list) {
				this.historySearch = JSON.parse(list)
			}
			// console.log(this.historySearch, 2132213);
		},
		methods: {
			arrowLeft() {
				//uni.navigateBack(-2)
				// uni.switchTab({
				//     url:'/pages/home/home'
				// });
				// uni.pageScrollTo({
				// 	scrollTop: 0, // 滚动到页面的目标位置  这个是滚动到顶部, 0 
				// 	duration: 0 // 滚动动画的时长
				// })
				this.$emit('backPage')
			},
			serchChange: debounce(async function() {
				if (!this.isFouse) return this.searchList = []
				const res = await getCommunity(this.searchValue)
				this.testSearchList = res.data.rows
				if (this.searchValue.length != 0) {
					this.searchIsShow = true;
					this.searchList = this.testSearchList.filter((item, index) => item.name.includes(this
						.searchValue))
				} else {
					this.searchIsShow = false;
					this.searchList = []
				}

			}, 300),
			gotoaddhouse(item) {
				this.searchValue = item.name
				// this.isFouse = false
				var indexof = this.historySearch.findIndex(elItem => elItem.name == item.name);
				if (indexof != -1) {
					this.historySearch.splice(indexof, 1);
					this.historySearch.unshift(item);
				} else {
					this.historySearch.unshift(item);
				}
				uni.setStorageSync('historySearch', JSON.stringify(this.historySearch));


				// this.searchIsShow = false

				this.$emit('click', item.name)

			},
			inputFocus() {
				this.isFouse = true
				// this.searchIsShow = true
			},
			computedtext(value) {
				return value.replace(this.searchValue, `<text style="color: red;">${this.searchValue}</text>`)
			},
			clearSearch() {
				this.searchIsShow = false;
				this.$emit('result')
			},

		},
		computed: {

		}
	}
</script>

<style lang="scss" scoped>
	@import "@/styles/global.scss";
	@import "@/styles/index.scss";

	.search_page {
		@include cover;


		// padding: 20rpx 0;

		.header_search {
			display: flex;
			padding: 20rpx;
			box-sizing: border-box;
			height: 108rpx;
			position: relative;
			overflow: visible !important;

			// margin-top: 8%;
			// background-color: aqua;
			.search_view {
				width: 100%;
				// height: 100%;
				position: absolute;
				// top: 55%;
				background-color: #fff;
				// padding: 20rpx;
				z-index: 999;
				// @include boxSing;

			}
		}

		.record {
			padding: 20rpx;
			padding-left: 20rpx;
			@include boxSing;
			margin-top: 30rpx;

			.title {
				font-size: 25rpx;
				color: $noimportant;
				padding-left: 30rpx;
			}

			.record_list {
				margin-top: 30rpx;
			}
		}


	}

	// ::v-deep .u-cell__body[data-v-1c4434ae] {
	// 	padding: 20rpx 0 ;
	// }
</style>